<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单全选取消</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			table {
				margin: 100px auto;
				text-align: center;
				width: 300px;
				border: 1px solid #a1a1a1;
				border-collapse: collapse;
			}

			thead tr {
				background-color: skyblue;
			}

			tbody tr td {
				background-color: aliceblue;
				border: 1px solid #a1a1a1;
			}
		</style>
	</head>
	<body>
		<table>
			<thead>
				<tr>
					<th><input type="checkbox" id="j_cbAll"></th>
					<th>商品</th>
					<th>价钱</th>
				</tr>
			</thead>
			<tbody id="j_tb">
				<tr>
					<td><input type="checkbox"></td>
					<td>iPhone 8</td>
					<td>8000</td>
				</tr>
				<tr>
					<td><input type="checkbox"></td>
					<td>iPad Pro</td>
					<td>5000</td>
				</tr>
				<tr>
					<td><input type="checkbox"></td>
					<td>iPad Ari</td>
					<td>2000</td>
				</tr>
				<tr>
					<td><input type="checkbox"></td>
					<td>Apple Watch</td>
					<td>2000</td>
				</tr>
			</tbody>
		</table>
		<script type="text/javascript">
			var j_cbAll = document.getElementById('j_cbAll');
			var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');
			// 注册事件
			j_cbAll.onclick = function() {
				for (var i = 0; i < j_tbs.length; i++) {
					j_tbs[i].checked = this.checked;
				}
			}
			// 给每一个按钮添加事件
			for (var i = 0; i < j_tbs.length; i++) {
				j_tbs[i].onclick = function() {
					// 每次点击都要检查一次
					var flag = true;
					for (var i = 0; i < j_tbs.length; i++) {
						// checked为false，不选中
						if (!j_tbs[i].checked) {
							flag = false;
						}
					}
					j_cbAll.checked = flag;
				}
			}
		</script>
	</body>
</html>
